<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商城-登录</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/base_header_login.css">
    <link rel="stylesheet" href="css/base_footer.css">
    <link rel="stylesheet" href="css/login.css">
</head>

<body>
    <!-- 顶部菜单栏 -->
    <header>
        <!-- 导航菜单栏 -->
        <div class="w1200 nav rel">
            <!-- logo -->
            <!-- 这里使用h1标签的目的是为了提高logo的权重 -->
            <h1 class="logo abs">
                <a href="index.html">乐购</a>
            </h1>

            <div class="contact fr">
                <div class="contact-pic fl">
                    联系
                </div>
                <div class="contact-tel fl">
                    咨询电话<br>XXXX-XXXXXXXX
                </div>
            </div>
        </div>
    </header>
    <!-- 登录框 -->
    <main>
        <div class="login w1200 rel">
            <div class="login-box abs">

                <!-- 普通登录 -->
                <div class="login-cont1 abs">
                    <!-- 切换区域 -->
                    <div class="change-hide1">
                        <span>account</span>
                        <img src="images/login/login_code.png">
                    </div>
                    <div class="login-change login-tab">
                        <a href="">普通登录</a>
                    </div>
                    <form action="">
                        <p>
                            <div class="user-pic abs">用户名图标</div>
                            <input type="text" placeholder="用户名/邮箱/手机号">
                        </p>
                        <p>
                            <div class="psw-pic abs">密码图标</div>
                            <input type="password" placeholder="密码">
                        </p>
                        <p>
                            <button type="submit">登录</button>
                        </p>
                    </form>
                    <div class="login-forget">
                        <a href="">忘记密码</a>
                        <a href="register.html">注册账号</a>
                    </div>
                    <div class="login-other">
                        <span>第三方登录：</span>
                        <a href="javascript:;"><img src="images/login/login_alipay.png"></a>
                        <a href="javascript:;"><img src="images/login/login_sina.png"></a>
                        <a href="javascript:;"><img src="images/login/login_wechat.png"></a>
                        <a href="javascript:;"><img src="images/login/login_qq.png"></a>
                    </div>
                </div>
                <!-- 二维码登录 -->
                <div class="login-cont2">
                    <!-- 切换区域 -->
                    <div class="change-hide2">
                        <span>qccode</span>
                        <img src="images/login/login_account.png">
                    </div>
                    <!-- 二维码 -->
                    <div class="login-change2">
                        <div class="login-camera longin-tab">
                            <p>打开 XXXX<br>扫一扫登录</p>
                        </div>
                    </div>
                    <div class="login-code">
                        qc-code
                    </div>
                    <p>点击下载XXX App</p>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <!-- 底部链接 -->
        <div class="foot-up w1200">
            <div class="foot-up-box clearfix">
                <div class="foot-up-inf fl">
                    <img src="images/footer/foot_up_pic1.jpg">
                    <span>
                        正品保障<br>
                    </span>
                    <span>
                        赠品行货&emsp;放心选购
                    </span>
                </div>
                <div class="foot-up-inf fl">
                    <img src="images/footer/foot_up_pic2.jpg">
                    <span>
                        满86包邮<br>
                    </span>
                    <span>
                        满86元&emsp;免运费
                    </span>
                </div>
                <div class="foot-up-inf fl">
                    <img src="images/footer/foot_up_pic3.jpg">
                    <span>
                        售后无忧<br>
                    </span>
                    <span>
                        7天无理由退货
                    </span>
                </div>
                <div class="foot-up-inf fl">
                    <img src="images/footer/foot_up_pic4.jpg">
                    <span>
                        准时送达<br>
                    </span>
                    <span>
                        收货时间由你做主
                    </span>
                </div>
            </div>
            <!-- 链接部分 -->
            <div class="foot-up-link">
                <dl>
                    <dt>新手入门</dt>
                    <dd><a href="">购买流程</a></dd>
                    <dd><a href="">会员制度</a></dd>
                    <dd><a href="">订单查询</a></dd>
                    <dd><a href="">服务协议及隐私说明</a></dd>
                    <dd><a href="">网站地图</a></dd>
                </dl>
                <dl>
                    <dt>支付方式</dt>
                    <dd><a href="">货到付款</a></dd>
                    <dd><a href="">网上支付</a></dd>
                    <dd><a href="">礼品卡支付</a></dd>
                    <dd><a href="">其他支付</a></dd>
                </dl>
                <dl>
                    <dt>配送服务</dt>
                    <dd><a href="">配送进度查询</a></dd>
                    <dd><a href="">商品验货与签收</a></dd>
                </dl>
                <dl>
                    <dt>相关规则</dt>
                    <dd><a href="">平台规则</a></dd>
                    <dd><a href="">退换货政策</a></dd>
                    <dd><a href="">发票制度</a></dd>
                    <dd><a href="">帮助中心</a></dd>
                </dl>
                <dl>
                    <dt>App更优惠</dt>
                    <dd><img src="images/qc_code.png"></dd>
                </dl>
                <dl>
                    <dt>加微信查订单</dt>
                    <dd><img src="images/qc_code.png"></dd>
                </dl>

            </div>
        </div>
        <!-- 版权信息 -->
        <div class="foot-down">
            <div class="w1200">
                <span>
                    沪ICP备XXXXXXXXX号 | 经营证照 | 互联网药品信息服务资格证(沪)-经营性-2017-0006 | 违法和不良信息举报电话：XXX-XXXXXXXX | 沪B2-XXXXXXX
                    |
                </span>
                <span>
                    沪公网安备 XXXXXXXXX号 | 友情链接 | 出版物经营许可证 | 增值电信业务经营许可证
                </span>
                <div class="foot-down-pic">
                    举报图片
                    <img src="images/footer/foot_down_pic1.jpg">
                    <img src="images/footer/foot_down_pic2.jpg">
                    <img src="images/footer/foot_down_pic3.jpg">
                    <img src="images/footer/foot_down_pic4.jpg">
                    <img src="images/footer/foot_down_pic5.jpg">
                    <img src="images/footer/foot_down_pic6.jpg">
                </div>
            </div>
        </div>
    </footer>
    <!-- js -->
    <script src="lib/jquery.js"></script>
    <script src="js/login.js"></script>
</body>

</html>